<template>
  <div>
    <div v-if="editObj.type=='text'">
      <i class="icon icon-danxingwenbenicon1"></i>单行文本
    </div>
    <div v-else-if="editObj.type=='textarea'">
      <i class="icon icon-duoxingwenbenicon1"></i>多行文本
    </div>
    <div v-else-if="editObj.type=='select'">
      <i class="icon icon-xialakuang1"></i>下拉框
    </div>
    <div v-else-if="editObj.type=='radio'">
      <i class="icon icon-danxuananniu-copy"></i>单项选择
    </div>
    <div v-else-if="editObj.type=='checkbox'">
      <i class="icon icon-duoxiangxuanze"></i>多项选择
    </div>
    <div v-else-if="editObj.type=='file'">
      <i class="icon icon-shangchuantupian"></i>上传图片
    </div>
    <div v-else="editObj.type=='pay'">
      <i class="icon icon-zhifu"></i>{{editObj.label}}
    </div>

    <div v-if="editObj.type=='pay'">
      <div>
        支付的公众号：
        <el-select class="" v-model="wxPayAcc" placeholder="请选择">
          <el-option
            v-for="item in wxPayAccList"
            :key="item.appid"
            :label="item.appName"
            :value="item.appid">
          </el-option>
        </el-select>
      </div>
      <div style="margin:10px 0 5px;">
        支付的卡券：
        <!-- <el-select class="pay-sel" v-model="ticketType" placeholder="请选择" @change="changeVaildAccount">
          <el-option
            v-for="item in wxValidAccList"
            :key="item.appid"
            :label="item.appName"
            :value="item.appid">
          </el-option>
        </el-select> -->
        <el-select v-model="payObj.cardTemplateId" filterable placeholder="请选择">
          <el-option
            v-for="item in WXcardList"
            :key="item.id"
            :label="item.cardTitle"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div style="margin:10px 0 5px;">
        支付金额：
        ¥<el-input class="pay-val" type="number" v-model="payObj.payVal" placeholder=""></el-input>
      </div>
      <div v-show="false">
        支付完成后：
        <el-radio-group v-model="payObj.payEnd">
          <el-radio :label="1">跳转到领取卡券页面</el-radio>
          <el-radio :label="2">跳转到URL</el-radio>
        </el-radio-group>
        <el-input v-show="payObj.payEnd==2" v-model="payObj.payToUrl" placeholder="请输入URL"></el-input>
      </div>
    </div>
    <div v-else>
      <div>
        标签文字：<el-input :disabled="disabledInput" v-model="edit.label" placeholder=""></el-input>
      </div>
      <div v-show="(editObj.type=='select'||editObj.type=='radio'||editObj.type=='checkbox')&&editObj.name!='area'">
        设置选项（多个选项请用换行隔开）
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="options">
        </el-input>
      </div>
      <div>是否必填：<el-checkbox :disabled="disabledCheckbox" v-model="edit.required"></el-checkbox></div>
      <div v-if="editObj.name=='mobile'">是否启用验证码：<el-checkbox v-model="edit.vcodeShow"></el-checkbox></div>
      <div class="cl">
        <span class="fl">说明图片：</span>
        <el-button size="small" type="primary" @click="visible1 = true">选择文件</el-button>
        <span>只能上传jpg/png文件</span>
        <ul class="tipImageLists">
          <li v-for="i, n in fileList">
            <span @click="editDelImg(n)"><i title="删除" class="icon icon-delete"></i></span>
            <img :src="i" alt="">
          </li>
        </ul>
      </div>
    </div>
    <div class="btn-wrap">
      <el-button type="primary" @click.native="editSure">确定</el-button>
      <el-button @click="editDelField">删除字段</el-button>
    </div>
    <!-- 选择图片 -->
    <el-dialog ref="dialog" title="选择图片" :visible.sync="visible1" class="dialog_cover" @open="SELECT_SOURCE({})">
      <dialog-image></dialog-image>
      <div slot="footer">
        <el-button type="primary" @click="handleAddImg()" :loading="isSave">确定</el-button>
        <el-button @click="visible1=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState, mapMutations, mapActions} from 'vuex'
  import env from '@/config/env'
  import dialogImage from '@/components/common/content/dialogImage'
  export default {
    data () {
      return {
        baseUrl: env.baseUrl,
        fileList: [],
        visible1: false,
        isSave: false,
        setOption: null,
        editIndex: '',
        wxPayAcc: '',
        ticketTypeList: [{
          value: 'wx257b842e53df71be',
          label: '酷友精选'
        }],
        ticketType: '',
        payObj: {
          wxPayAcc: '',
          ticket: '',
          cardTemplateId: '',
          ticketName: '',
          payVal: '',
          payEnd: 1,
          payToUrl: ''
        }
      }
    },
    mounted () {
      this.initPage()
    },
    components: {dialogImage},
    props: ['editObj'],
    computed: {
      ...mapState({
        formHtmlMap: state => state.contentManage.formHtmlMap,
        sourceInfo: state => state.sourceManage.sourceInfo,
        selected: state => state.sourceManage.selected,
        WXcardList: state => state.contentManage.WXcardList,
        wxPayAccList: state => state.contentManage.wxPayAccList,
        wxValidAccList: state => state.contentManage.wxValidAccList
      }),
      // 文件上传附加的头部
      headers () {
        return {
          UBToken: localStorage.getItem('UBToken')
        }
      },
      edit: {
        get () {
          this.editIndex = this.editObj.index
          this.fileList = this.editObj.pic
          return this.editObj
        },
        set (val) {
          this.editObj = val
          this.formHtmlMap[this.editIndex] = this.$_.cloneDeep(val)
          this.SET_FORM_HTML_MAP(this.formHtmlMap)
        }
      },
      options: {
        get () {
          this.setOption = null
          let opt = ''
          this.editObj.options && this.editObj.options.map(i => {
            i.map(k => {
              opt += k.label + '\n'
            })
          })
          return opt.substring(0, opt.length - 1)
        },
        set (val) {
          this.setOption = val
        }
      },
      disabledCheckbox() {
        const items = ['name', 'mobile']
        return items.indexOf(this.editObj.name) > -1
      },
      disabledInput() {
        const items = ['name', 'mobile']
        return items.indexOf(this.editObj.name) > -1
      }
    },
    watch: {
      editObj () {
        this.wxPayAcc = this.editObj.payObj && this.editObj.payObj.wxPayAcc
        this.ticketType = this.editObj.ticketType
        this.payObj = {...this.editObj.payObj}
        // if (this.payObj.cardTemplateId) {
          this.getWXcardList({  // 获取卡券列表
            // appid: this.ticketType
          })
        // }
      }
    },
    methods: {
      ...mapMutations(['SET_FORM_HTML_MAP', 'SELECT_SOURCE']),
      ...mapActions(['getWxSourceInfo2', 'uploadImage', 'getWXcardList', 'getWXpayAccountList', 'getWXvalidAccountList']),
      initPage () {
        this.getWXpayAccountList()  // 获取支付公众号
        // this.getWXvalidAccountList()  // 获取当前授权可用公众号
      },
      // 改变授权可用公众号
      changeVaildAccount (val) {
        this.getWXcardList({  // 获取卡券列表
          appid: val
        }).then(() => {
          this.payObj.ticket = ''
        })
      },
      // 添加图片
      async handleAddImg () {
        this.visible1 = false
        if (!this.fileList) {
          this.fileList = []
        }
        this.fileList.push(this.selected.url)
      },
      // 删除图片
      editDelImg (n) {
        this.fileList.splice(n, 1)
      },
      // 编辑确定
      editSure () {
        console.log(123)
        if (this.setOption) {
          this.editObj.options = [[]]
          this.setOption.split('\n').map((item, n) => {
            item && this.editObj.options[0].push({val: n + 1, label: item})
          })
        }
        if (this.fileList && this.fileList.length) {
          this.editObj.pic = this.fileList
        }
        if (this.editObj.type === 'pay') {
          if (this.payObj.cardTemplateId === '' || this.payObj.cardTemplateId === undefined || this.payObj.payVal === '' || this.wxPayAcc === '' || (this.payObj.payEnd === 2 && this.payObj.payToUrl === '')) {
            this.$message.warning('请完善支付信息')
            return
          }
          this.WXcardList.map(elem => {
            if (elem.id === this.payObj.cardTemplateId) {
              this.payObj.ticketName = elem.cardTitle
            }
          })
          this.editObj.payObj = this.payObj
          this.editObj.wxPayAcc = this.payObj.wxPayAcc = this.wxPayAcc
          // this.editObj.ticketType = this.ticketType
          // this.editObj.cardId = this.payObj.ticket
          this.editObj.cardTemplateId = this.payObj.cardTemplateId
        }
        this.$emit('editSure', this.editObj)
      },
      // 删除字段
      editDelField () {
        this.$emit('delItem', this.editObj.index)
      }
    }
  }
</script>
<style lang="scss">
  .form-content{
    &-type{
      .el-button{
        width: 90%;
        margin: 0 0 10px 12px;
      }
      .icon{
        margin-right: 6px;
      }
    }
  }
  .btn-wrap{
    margin-top: 15px;
  }
  .tipImageLists{
    li{
      position: relative;
      float: left;
      margin-right: 15px;
      span{
        position: absolute;
        display: none;
        padding: 3px;
        background: #fff;
        top: 0;
        right: 0;
        line-height: 1;
      }
      &:hover span{
        display: block;
        cursor: pointer;
      }
      img{width: 80px; height: 80px;}
    }
  }
  .pay-sel{
    width: 160px;
  }
  .pay-val{
    width: 200px;
    margin-left: 6px;
  }
</style>
